<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <title>FlyProduct</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" type="text/css" href="/public/bootstrap/css/bootstrap-responsive.min.css">
    <link rel="stylesheet" type="text/css" href="/public/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/public/bootstrap/css/bootstrap-datetimepicker.min.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        /*
 * Image preview script 
 * powered by jQuery (http://www.jquery.com)
 * 
 * written by Alen Grakalic (http://cssglobe.com)
 * 
 * for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
 *
 */
 
this.imagePreview = function(){	
	/* CONFIG */
		
		xOffset = 10;
		yOffset = 30;
		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result
		
	/* END CONFIG */
	$("a.preview").hover(function(e){
		this.t = this.title;
		this.title = "";	
		var c = (this.t != "") ? "<br/>" + this.t : "";
		$("body").append("<p id='preview'><img width='250px' height='250px' src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");								 
		$("#preview")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
			.fadeIn("fast");						
    },
	function(){
		this.title = this.t;	
		$("#preview").remove();
    });	
	$("a.preview").mousemove(function(e){
		$("#preview")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px");
	});			
};


// starting the script on page load
$(document).ready(function(){
	imagePreview();
});
</script>
    <style type="text/css">
        body {
            padding-top: 60px;
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }
        pre{
                display:block;
                font:100% "Courier New", Courier, monospace;
                padding:10px;
                border:1px solid #bae2f0;
                background:#e3f4f9;	
                margin:.5em 0;
                overflow:auto;
                width:800px;
        }

        img{border:none;}
        ul,li{
                margin:0;
                padding:0;
        }
        li{
                list-style:none;
                float:left;
                display:inline;
                margin-right:10px;
        }

        #preview{
                position:absolute;
                border:1px solid #ccc;
                background:#333;
                padding:5px;
                display:none;
                color:#fff;
                }

/*  */
</style>
    </style>

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <script type="text/javascript">
        function onKeyPressed() {
            src = document.getElementById('src').value;
            document.getElementById('mainImagePreview').setAttribute("src",src);
        }
    </script> 
</head>    
<body>
    <?php if ($this->error == 1): ?>
        <div class="alert alert-success">
            Update done.
        </div>
    <?php elseif ($this->error == -110): ?>
        <div class="alert alert-error">
            Update fail, please check your data.
        </div>
    <?php endif; ?>
    <?php echo $this->render('tool/navmenu.phtml') ?>
    
    <div class="container-fluid">
        <div class="span9">
            <legend>Update album: <?php echo $this->data['album']['title']?></legend>
            <form  class="form-horizontal" action="/public/tool/girlupdate" method="post">
                <input type="hidden" value="<?php echo $this->data['album']['create_time']?>" name="create_time" />
                <input type="hidden" value="<?php echo $this->data['album']['id']?>" name="id" />
                <input type="hidden" value="update" name="update"/>
                <div class="control-group">
                    <label class="control-label">Album name</label>
                    <div class="controls">
                        <input type="text" id="title" name="title" value="<?php echo $this->data['album']['title']?>" placeholder="Enter album's name">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">Main Image</label>
                    <div class="controls">
                        <input type="text" id="src" onkeyup="onKeyPressed()" value="<?php echo $this->data['album']['src']?>" name="src" placeholder="Enter main image url">
                    </div>
                </div>
                 <div class="control-group">
                    <div class="controls">
                        <li><a href='<?php echo $this->data['album']['src'] ?>' class="preview"><img id="mainImagePreview" width="50px" height="50px" src='<?php echo $this->data['album']['src'] ?>' /></a></li>
                    </div>
                </div>
                <div class="control-group">
                    <legend>Review <?php echo count($this->data['album_detail_array'])?> image(s) (not refresh when edit)</legend>
                    <?php foreach ($this->data['album_detail_array'] as $value):?>
                        <li><a href='<?php echo $value['src'] ?>' class="preview"><img width="50px" height="50px" src='<?php echo $value['src'] ?>' ></a></li>
                        </img>
                    <?php endforeach?>
                </div>
                
                <div class="control-group">
                    <legend>Image List for this album</legend>
                    <div class="alert alert-info">
                        Each url is separated by "Enter"
                        <br>Example: http://image1.jpg"Enter"http://image2.jpg"Enter"http://image3.jpg"Enter"http://image4.jpg
                    </div>
                    <div class="control-group">
                        <label class="control-label">Images</label>
                        <div class="controls">
                            <textarea rows="5" name="imagelist" value="imagelist" style="width:100%"><?php echo $this->data['album_detail']?></textarea>
                        </div>
                    </div>
                </div>
                <div class="control-group">
                    <div class="controls">
                        <button type="submit" class="btn btn-primary">Update this album</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>
</html>

